<template>
    <div>
      <div class="breadcrumb">
        <router-link class="shouye" to="/home">首页 / </router-link>
        <div class="xinxi">平台动态</div>
      </div>
      <div class="bg">
        <div class="table-container">
          <h2>动态标题</h2>
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th class="left-align">动态标题</th>
                <th>
                  发布时间
                  <button @click="toggleSortOrder">
                    <img v-if="sortOrder === 'asc'" src="../images/公告列表/u202.png" alt="升序" class="button-img" />
                    <img v-else src="../images/公告列表/u202.png" alt="降序" class="button-img" />
                  </button>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(info, index) in sortedInfos" :key="index">
                <td><img src="../images/主页/u19.png" style="height: 2em;width: 2em;"></td>
                <td class="left-align">
                  <span @click="goToDetails(info.id)" class="info-name">{{ info.name }}</span>
                </td>
                <td>{{ info.time }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import router from "@/router/route";
  
  export default {
    name: 'PlatformDynamics',
    data() {
      return {
        sortOrder: 'asc',
        infos: [
          { id: 1, name: "四川省交通建设集团有限责任公司智能化料场招标采购的公示", time: "2022-04-13" },
          { id: 2, name: "校工会交互智能平板采购竟价成交公告", time: "2022-04-13" },
          { id: 3, name: "平邑县图书馆馆藏图书及智能化设备采购项目中标结果公示", time: "2022-04-13" },
          { id: 4, name: "三-智能电机-局部放电设备-招标招标公告-ZB202304130003\n\n项目标名", time: "2022-04-13" },
          { id: 5, name: "中电鸿信信息科技有限公司2023年警务室智能化改造项目单一来源采购方案公示", time: "2022-04-13" },
          { id: 6, name: "海头镇宅基村土地发包项目", time: "2022-04-13" },
          { id: 7, name: "先锋创业大楼(515-1室)60㎡", time: "2022-04-13" },
          { id: 8, name: "万达开绿色智能铸造产业园项目(二期)比选结果公告", time: "2022-04-13" },
          { id: 9, name: "2023年度工伤基金结算支付智能审核监控项目竞争性磋商公告", time: "2022-04-13" },
          { id: 10, name: "万达开绿色智能铸造产业园项目(三期)比选结果公告", time: "2022-04-13" },
          { id: 11, name: "太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目", time: "2022-04-13" },
          { id: 12, name: "侯马市第二中学校2023年4月至11月政府采购意向-城乡义务教育补助经费中央资金", time: "2022-04-13" },
          { id: 13, name: "太原市迎泽区卫生监督所2023年4月至12月政府采购意向-公用经费项目", time: "2022-04-13" },
          { id: 14, name: "侯马市第二中学校2023年4月至8月政府采购意向-城乡义务教育补助经费中央资金", time: "2022-04-13" },
          { id: 15, name: "【次氯酸钠贮存罐修理】采购公告 附件", time: "2022-04-13" }
        ]
      };
    },
    computed: {
      sortedInfos() {
        return this.infos.slice().sort((a, b) => {
          if (this.sortOrder === 'asc') {
            return new Date(a.time) - new Date(b.time);
          } else {
            return new Date(b.time) - new Date(a.time);
          }
        });
      }
    },
    methods: {
      Q() {
        router.push("/");
      },
      goToDetails(id) {
        router.push({ name: 'PlatformDynamicsPlus', params: { id } });
      },
      toggleSortOrder() {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      }
    }
  };
  </script>
  
  <style scoped>
  * {
    margin: 0;
    padding: 0;
  }
  .breadcrumb {
    margin-left: 10px;
    margin-bottom: -40px;
    font-size: 14px;
    text-align: left;
    margin-top: 30px;
    display: flex;
  }
  .breadcrumb .xinxi {
    color: black;
    margin-top: 30px;
  }
  .breadcrumb .shouye {
    color: #888;
    margin-top: 30px;
    cursor: pointer;
  }
  .bg {
    background-color: #fafafa;
    width: 80%;
    height: 700px;
    margin: 0 auto;
    padding-top: 30px;
  }
  .table-container {
    background-color: white;
    margin: 20px;
    padding: 20px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    margin-bottom: 50px;
  }
  h2 {
    margin-bottom: 20px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  th {
    background-color: #b4f4da;
    position: relative;
  }
  th button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
  }
  .left-align {
    text-align: left;
  }
  a {
    text-decoration: none;
    color: black;
  }
  .size {
    height: 30px;
    margin-top: 5px;
  }
  .button-img {
    width: 1em;
    height: 1em;
  }
  .content:hover {
    cursor: pointer;
  }
  .info-name {
    cursor: pointer;
    text-decoration: none; /* 取消下划线 */
    color: inherit; /* 继承父元素的颜色 */
  }
  </style>
  